{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "name": "VisJS.ipynb",
      "provenance": [],
      "collapsed_sections": [],
      "authorship_tag": "ABX9TyPaB72R1mYFOgX04Izg2I3o",
      "include_colab_link": true
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    },
    "language_info": {
      "name": "python"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/EvgSkv/logica/blob/main/examples/more/Generic-VisJS.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "JRhzxxRqH3PG"
      },
      "source": [
        "# Using VisJS\n",
        "\n",
        "[Evgeny Skvortsov](https://github.com/evgskv)\n",
        "\n",
        "May 2021\n",
        "\n",
        "This is an example of using VisJS in Google CoLab.\n",
        "\n",
        "See an example of using it in regular Jupyter [here](https://www.kaggle.com/evgenyskvortsov/another-visjs)."
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "uxbuOueeHI_m",
        "outputId": "3e69cc4b-a768-45a6-bd55-c824fc9b7f86"
      },
      "source": [
        "%%writefile graph.html\n",
        "\n",
        "<!DOCTYPE html>\n",
        "<html lang=\"en\">\n",
        "  <head>\n",
        "    <title>Network</title>\n",
        "    <style type=\"text/css\">\n",
        "      #mynetwork_1 {\n",
        "        width: 600px;\n",
        "        height: 400px;\n",
        "        border: 1px solid lightgray;\n",
        "      }\n",
        "    </style>\n",
        "  </head>\n",
        "  <body>\n",
        "    <div id=\"mynetwork_1\"></div>\n",
        "    <script type=\"text/javascript\" src=\"https://unpkg.com/vis-network/standalone/umd/vis-network.min.js\"></script>\n",
        "    <script type=\"text/javascript\">\n",
        "\n",
        "      // create an array with nodes\n",
        "      var nodes = new vis.DataSet([\n",
        "        { id: 1, label: \"Node 1\" },\n",
        "        { id: 2, label: \"Node 2\" },\n",
        "        { id: 3, label: \"Node 3\" },\n",
        "        { id: 4, label: \"Node 4\" },\n",
        "        { id: 5, label: \"Node 5\" },\n",
        "      ]);\n",
        "\n",
        "      // create an array with edges\n",
        "      var edges = new vis.DataSet([\n",
        "        { from: 1, to: 3 },\n",
        "        { from: 1, to: 2 },\n",
        "        { from: 2, to: 4 },\n",
        "        { from: 2, to: 5 },\n",
        "        { from: 3, to: 3 },\n",
        "      ]);\n",
        "      // create a network\n",
        "      var container = document.getElementById(\"mynetwork_1\");\n",
        "      var data = {\n",
        "        nodes: nodes,\n",
        "        edges: edges,\n",
        "      };\n",
        "      var options = {};\n",
        "      var network = new vis.Network(container, data, options);\n",
        "\n",
        "    </script>\n",
        "  </body>\n",
        "</html>"
      ],
      "execution_count": 6,
      "outputs": [
        {
          "output_type": "stream",
          "text": [
            "Overwriting graph.html\n"
          ],
          "name": "stdout"
        }
      ]
    },
    {
      "cell_type": "code",
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 419
        },
        "id": "JlGY2Ss8HMCn",
        "outputId": "0ce5aff8-f4c4-4def-f9df-a278df046ba4"
      },
      "source": [
        "from IPython.display import HTML\n",
        "\n",
        "HTML(open('graph.html').read())\n"
      ],
      "execution_count": 7,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/html": [
              "\n",
              "<!DOCTYPE html>\n",
              "<html lang=\"en\">\n",
              "  <head>\n",
              "    <title>Network</title>\n",
              "    <style type=\"text/css\">\n",
              "      #mynetwork_1 {\n",
              "        width: 600px;\n",
              "        height: 400px;\n",
              "        border: 1px solid lightgray;\n",
              "      }\n",
              "    </style>\n",
              "  </head>\n",
              "  <body>\n",
              "    <div id=\"mynetwork_1\"></div>\n",
              "    <script type=\"text/javascript\" src=\"https://unpkg.com/vis-network/standalone/umd/vis-network.min.js\"></script>\n",
              "    <script type=\"text/javascript\">\n",
              "\n",
              "      // create an array with nodes\n",
              "      var nodes = new vis.DataSet([\n",
              "        { id: 1, label: \"Node 1\" },\n",
              "        { id: 2, label: \"Node 2\" },\n",
              "        { id: 3, label: \"Node 3\" },\n",
              "        { id: 4, label: \"Node 4\" },\n",
              "        { id: 5, label: \"Node 5\" },\n",
              "      ]);\n",
              "\n",
              "      // create an array with edges\n",
              "      var edges = new vis.DataSet([\n",
              "        { from: 1, to: 3 },\n",
              "        { from: 1, to: 2 },\n",
              "        { from: 2, to: 4 },\n",
              "        { from: 2, to: 5 },\n",
              "        { from: 3, to: 3 },\n",
              "      ]);\n",
              "      // create a network\n",
              "      var container = document.getElementById(\"mynetwork_1\");\n",
              "      var data = {\n",
              "        nodes: nodes,\n",
              "        edges: edges,\n",
              "      };\n",
              "      var options = {};\n",
              "      var network = new vis.Network(container, data, options);\n",
              "\n",
              "    </script>\n",
              "  </body>\n",
              "</html>"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "metadata": {
            "tags": []
          },
          "execution_count": 7
        }
      ]
    }
  ]
}